<template>
    <view class="layout">
        <uni-header :leftIcon="true" :title="'评课量表'"></uni-header>
        <view class="content">
            <view class="total_points">总分：{{scores}}分 {{scoreClass}} {{scoreGrade}}</view>
            <view class="score">
                <view class="score-list" v-for="item in targetData">
                    <view class="score-title">
                        <u-icon name="more-circle-fill" color="#2979ff" size="28"></u-icon>
                        <text class="title-text">{{item.er_title}}</text>
                    </view>
                    <view class="score-card" v-for="iten in item.array3">
                        <view class="card-rate">分数：
                            <uni-rate @change="onChange(iten)" :max="10" v-model="iten.score" :value="iten.score" />
                        </view>
                        <view class="score-card-head">
                            <view class="mark-list" v-for="key in iten.abcd">{{key}}</view>
                        </view>
                        <view class="score-card-foot">{{iten.san_title}}</view>
                    </view>
                </view>
            </view>
            <view class="btn"><button @click="saveAppraise">保存</button></view>
        </view>
    </view>
</template>

<script>
    import { getTargetList, getTargetLists, saveClassScale, saveEmulateScale } from "@/api/home"
    export default {
        data(){
            return{
                type:"",
                activeId:"",
                deviceId: this.$store.state.user.deviceId,
                targetData:[],
                scores:"",
                scoreClass:"",
                scoreGrade:"",
                formData:[]
            }
        },
        onLoad(option){
            this.activeId = option.activeId;
            this.type = option.type;
            if(this.type == "class"){
                this.getClassAppraise();
            }else if(this.type == "emulate"){
                this.getEmulateAppraise();
            }
        },
        methods: {
           //获取听评课下评价数据
            getClassAppraise(){
                getTargetList({activityId:this.activeId,deviceId:this.deviceId}).then(res=>{
                    this.targetData = res.list;
                    this.scores = res.scores
                    this.scoreClass = res.scoreClass
                    this.scoreGrade = res.scoreGrade
                })
            },
            //获取观摩课下评价数据
            getEmulateAppraise(){
                getTargetLists({activityId:this.activeId,deviceId:this.deviceId}).then(res=>{
                    this.targetData = res.list;
                    this.scores = res.scores
                    this.scoreClass = res.scoreClass
                    this.scoreGrade = res.scoreGrade
                })
            },
            //保存评价数据
            saveAppraise(){
                let params={
                    activityId:this.activeId,
                    jsonArray:JSON.stringify(this.formData),
                    deviceId:this.deviceId
                }
                if(this.type == "class"){
                    this.addClassAppraise(params);
                }else if(this.type == "emulate"){
                    this.addEmulateAppraise(params);
                }
            },
            //评分事件
            onChange(e){
                this.formData.push({
                    scaledetail_id:e.id,
                    score:e.score,
                    lectureScaleDetail_id:e. lectureScaleDetail_id
                })
            },
            //听评课下评价数据
            addClassAppraise(params){
                saveClassScale(params).then(res=>{
                    if(res.status == 0){
                        this.$modal.showToast('保存成功');
                        if(this.type == "class"){
                            this.getClassAppraise();
                        }else if(this.type == "emulate"){
                            this.getEmulateAppraise();
                        }
                    }
                })
            },
            //观摩课下评价数据
            addEmulateAppraise(params){
                saveEmulateScale(params).then(res=>{
                    if(res.status == 0){
                        this.$modal.showToast('保存成功');
                        if(this.type == "class"){
                            this.getClassAppraise();
                        }else if(this.type == "emulate"){
                            this.getEmulateAppraise();
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .layout{
        .content{
            .total_points{
                padding: 10px 0;
                text-align: center;
                background: #e8e3e3;
            }
            .score{
                .score-list{
                    padding: 10px 15px;
                    margin-top: 15px;
                    background: #e8e3e3;
                    .score-title{
                        display: flex;
                        align-items: center;
                    }
                    .score-card{
                        background: #fff;
                        margin-top: 10px;
                        border-radius: 10px;
                        .card-rate{
                            display: flex;
                            align-items: center;
                            padding: 10px 15px;
                            .rate-text{
                                margin-left: 10px;
                                color:#3c96f3;
                            }
                        }
                        .score-card-head{
                            display: flex;
                            align-items: center;
                            padding: 10px 15px;
                            justify-content: space-between;
                            .mark-list{
                                background: #07bbf3;
                                border-radius: 5px;
                                padding: 3px 5px;
                                color: #fff;
                                font-size: 14px;
                            }
                        }
                        .score-card-foot{
                            color:#999;
                            padding: 10px 15px;
                        }
                    }
                }
            }
        }
    }
</style>
